<template>
    <table
        :id="detail.identifier"
        class="usr-table"
        border="1"
        :style="{
            fontWeight: detail.style.fontWeight ? detail.style.fontWeight.id : 'normal',
            fontStyle: detail.style.fontStyle ? detail.style.fontStyle.id : 'normal',
            fontSize: detail.style.fontSize + 'px',
            fontFamily: detail.style.fontFamily,
            color: detail.style.foreColor,
            borderWidth: detail.style.waterBorderWidth + 'px',
            borderStyle: 'solid',
            borderColor: detail.style.waterBorderColor,
        }"
    >
        <tbody :id="`${detail.identifier}-Tbody`" @dblclick="handleTableDbClick">
            <tr v-for="(rItem, rIndex) in rowList" :key="rIndex" :style="{ borderWidth: detail.style.waterBorderWidth + 'px', borderStyle: 'solid' }">
                <td v-for="(cItem, cIndex) in columnList" :key="cIndex" :style="{ borderWidth: detail.style.waterBorderWidth + 'px', borderStyle: 'solid' }">
                    <input :id="`${detail.identifier}-${rIndex}-${cIndex}`" :style="{ textAlign: detail.style.textAlign }" type="text" autocomplete="off" :readOnly="isReadOnly" />
                </td>
            </tr>
        </tbody>
        <div v-show="false">{{ dataInit }} {{ listInit }}</div>
    </table>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

import BaseView from './View';
import topoUtil from '@/utils/topo/topo-util';
import { getAnimate } from '@/utils/topo/anime';

export default {
    name: 'usrTable',
    extends: BaseView,
    data() {
        return {
            isReadOnly: true,
            list: [], // 表格数据
        };
    },
    computed: {
        ...mapState({
            currentCom: (state) => state.topoEditor.selectedComponent,
            isLayer: (state) => state.topoEditor.selectedIsLayer,
            mqttData: (state) => state.topoEditor.mqttData,
        }),
        rowList() {
            const { rowNum } = this.detail.style;
            return new Array(rowNum);
        },
        columnList() {
            const { columnNum } = this.detail.style;
            return new Array(columnNum);
        },
        listInit() {
            const { rowNum, columnNum } = this.detail.style;
            const listTemp = new Array(rowNum).fill('').map((item) => new Array(columnNum).fill(''));
            this.packedArray(listTemp, this.list);
        },
        dataInit() {
            if (Object.keys(this.mqttData).length !== 0) {
                const type = Number(this.$route.query.type);
                let mqttNum = this.mqttData.serialNumber;
                let actionNum = this.detail.dataAction.serialNumber;
                if (type === 1) {
                    actionNum = this.$route.query.serialNumber;
                }
                if (type === 2) {
                    if (this.detail.dataAction.variableType && this.detail.dataAction.variableType !== 1) {
                        mqttNum = this.mqttData.sceneModelDeviceId;
                        actionNum = this.detail.dataAction.sceneModelDeviceId;
                    }
                }
                // 动画初始化
                if (actionNum && actionNum === mqttNum && this.detail.dataAction.identifier && this.detail.dataAction.paramJudge && this.detail.dataAction.paramJudgeData) {
                    for (let i = 0; i < this.mqttData.message.length; i++) {
                        if (this.detail.dataAction.identifier == this.mqttData.message[i].id) {
                            let val = this.mqttData.message[i].value;
                            this.animatePlay(val);
                        }
                    }
                }
            }
        },
    },
    watch: {
        currentCom: {
            handler(newVal, oldVal) {
                if (newVal && newVal.identifier !== this.detail.identifier) {
                    this.isReadOnly = true;
                    const usrTable = document.getElementById(this.detail.identifier);
                    usrTable.style.boxShadow = 'none';
                    usrTable.style.borderColor = this.detail.style.waterBorderColor;
                    this.saveList();
                }
            },
            deep: true,
        },
        isLayer(val) {
            if (val) {
                this.isReadOnly = true;
                const usrTable = document.getElementById(this.detail.identifier);
                usrTable.style.boxShadow = 'none';
                usrTable.style.borderColor = this.detail.style.waterBorderColor;
                this.saveList();
            }
        },
    },
    mounted() {
        const { rowNum, columnNum } = this.detail.style;
        const { tableList } = this.detail.dataBind;
        if (tableList && tableList.length !== 0) {
            this.list = tableList;
            this.getList();
        } else {
            this.list = new Array(rowNum).fill('').map((item) => new Array(columnNum).fill(''));
        }
        if (!this.editMode) {
            this.initAnimate();
        }
    },
    methods: {
        ...mapMutations('topoEditor', ['setIsDeleteCom']),
        // 双击表格
        handleTableDbClick(event) {
            if (this.editMode) {
                this.isReadOnly = false;
                const usrTable = document.getElementById(this.detail.identifier);
                usrTable.style.borderColor = '#000000';
                usrTable.style.boxShadow = '0 2px 12px 0 rgba(0, 0, 0, .1)';
                event.preventDefault();
            }
        },
        // 保存列表数据
        saveList() {
            const usrTableTbody = document.getElementById(`${this.detail.identifier}-Tbody`);
            const trList = Array.from(usrTableTbody.children);
            for (var i = 0; i < trList.length; i++) {
                let tdList = Array.from(trList[i].children);
                for (var j = 0; j < tdList.length; j++) {
                    const inputElement = tdList[j].childNodes[0];
                    this.list[i][j] = inputElement.value;
                }
            }
            this.detail.dataBind.tableList = [...this.list];
        },
        // 获取数据列表
        getList() {
            const usrTableTbody = document.getElementById(`${this.detail.identifier}-Tbody`);
            const trList = Array.from(usrTableTbody.children);
            for (var i = 0; i < trList.length; i++) {
                let tdList = Array.from(trList[i].children);
                for (var j = 0; j < tdList.length; j++) {
                    const inputElement = tdList[j].childNodes[0];
                    inputElement.value = this.list[i][j];
                }
            }
        },
        // 合并数组
        packedArray(newlist, oldList) {
            if (newlist && oldList) {
                for (var i = 0; i < newlist.length; i++) {
                    let chilList = newlist[i];
                    for (var j = 0; j < chilList.length; j++) {
                        let oldRowVal = oldList[i];
                        chilList[j] = oldRowVal && oldRowVal[j] ? oldRowVal[j] : '';
                    }
                }
                this.list = [...newlist];
            }
        },
        // 动画初始化
        initAnimate() {
            let value = !this.detail.dataAction.modelValue ? 0 : this.detail.dataAction.modelValue;
            this.animatePlay(value);
        },
        // 开始动画
        animatePlay(val) {
            let isGd = topoUtil.judgeSize(this.detail.dataAction.paramJudge, val, this.detail.dataAction.paramJudgeData);
            if (isGd) {
                if (this.detail.dataAction.xyAction) {
                    // 显隐判断
                    getAnimate().set(document.getElementById(this.detail.identifier), {
                        display: 'block',
                    });
                }
                if (this.detail.dataAction.maAction) {
                    // 明暗判断
                    getAnimate().set(document.getElementById(this.detail.identifier), {
                        filter: 'brightness(0.5)',
                    });
                }
                if (this.animateView) {
                    this.animateView.play();
                }
            } else {
                if (this.detail.dataAction.xyAction) {
                    // 显隐判断
                    getAnimate().set(document.getElementById(this.detail.identifier), {
                        display: 'none',
                    });
                }
                if (this.detail.dataAction.maAction) {
                    // 明暗判断
                    getAnimate().set(document.getElementById(this.detail.identifier), {
                        filter: 'brightness(0.5)',
                    });
                }
                if (this.animateView) {
                    this.animateView.pause();
                }
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.usr-table {
    height: 100%;
    width: 100%;
    border-collapse: collapse;
    border: #b3b3b3;
    font-weight: bold;

    td {
        white-space: normal;
        word-wrap: break-word;
        padding: 0 5px;

        input {
            width: 100%;
            height: calc(100% - 5px);
            background: none;
            border: none;
            padding: 0;
            outline: none;
            font-family: inherit;
        }
    }
}
</style>
